Disable Right Click Using MooTools 1.2

By  on  

We all know that it's bad practice to disable the right click context menu, so I'll skip the explanation of why that is. Unfortunatley, however, customer request comes before anything else when you're doing their website. If your project is using MooTools 1.2, you can achieve this goal.

The MooTools 1.2

	
	window.addEvent('domready', function() {
		document.body.addEvent('contextmenu',function(e) {
			e.stop();
		});
	});
	

Again, the only time I would do this is if the customer asked for it. It's good to know that it's so easy to implement, right?

Recent Features

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    Fullscreen API

    As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...

  • By
    Dynamically Create Charts Using MooTools MilkChart and Google Analytics

    The prospect of creating graphics charts with JavaScript is exciting. It's also the perfect use of JavaScript -- creating non-essential features with unobtrusive scripting. I've created a mix of PHP (the Analytics class), HTML, and MooTools JavaScript that will connect to Google Analytics...

Discussion

  1. Oliver

    contextmenu eh?? hmmm, news to me.

  2. ZOMG Bad practice alert!!!

    Kidding, you can only argue that so far. Also, this is quite useful should you want to implement your own context menu…

  3. awake

    dave…

    whad do yo use to format source code on your blog post? (the code that puts the line #’s, copy to clipboard, e.t.c.)

    thanks…

  4. I think e.stop() is enough, because it already do preventDefault in the Mootools Core source.

  5. @Lim Chee Aun: Good call! I’ve adjusted the code. Thank you for mentioning that.

  6. This is also so useful when planning to add a custom context menu to your page, or a custom menu appears when you right click a certain element (a hyperlink, a button, or an image).

    Thanks for sharing, David.

  7. @Ahmed: Thanks — I have been working on a custom context menu…

  8. @David: You’re welcome! Will you populate the custom context menu?

    PS: Is it possible to work a clipboard manager (copy selection to clipboard) using MooTools?

  9. uhg. I do not like this. Disabling my browsers features is not cool, I would be upset at any site or service that pulled this.

    @Ahmed,

    javascript cannot access the clipboard(which is a good thing) unless the browser has some feature that allows this(like older builds of IE). However, with the help of flash, you can do it, which is what syntaxhighlighter(in use here) does.

  10. Quit good for prevent picture steeling ;) ….

  11. great stuff, it’s new to me to heard about contextmenu, but anyway good job…. hope you will work more about mootools….

  12. @weblizzer: To put it simple, a context menu is the menu that appear when you rightclick somewhere, like on Windows desktop for example, the “Refresh New-> etc..” is a contextmenu.

  13. Why document.body and not document.documentElement (i.e. html tag)? What id body has a margin, or html has a padding set?

  14. I don’t this will prevent displying context menu from opera…as far as I know you can’t disable context menu in opera….

  15. @Roshan: That’s correct.

  16. imran

    hi,
    its all fine, but do you have any solution to show Custom Context Menu on right click in Opera???
    if you find any solution please reply to my email , immidiately, you help will be highly appriciated, thanks
    imran

  17. David,

    For compatibility with IE7, shouldn’t that be $(document.body) rather than just document.body?

    Rob

  18. For reference, you should be able to disable this by overriding the oncontextmenu event in the javascript console. It looks like this is being added to document.body, so

    document.body.oncontextmenu="";
  19. refreegrata

    sorry, I refer to the “a” elements, but in the comments was taken like code.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!